<template>
  <div>
    <el-card id="search">

      <el-row>
        <el-col :span="20">
          <el-input v-model="searchModel.name" placeholder="影视名" clearable />
          <el-select v-model="searchModel.cid" clearable placeholder="请选择">
            <el-option
              v-for="item in category"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>

          <el-button type="primary" round icon="el-icon-search" @click="getMovieList">查询</el-button>

        </el-col>
        <el-col :span="4" align="right">
          <el-button type="primary" icon="el-icon-plus" circle @click="openEditUI(null)" />
        </el-col>
      </el-row>
    </el-card>

    <el-card>
      <el-table :data="movieList" stripe style="width: 100%">
        <el-table-column label="#" width="80">
          <template slot-scope="scope">
            <!-- (pageNo-1 * pageSize + index + 1 -->
            {{ (searchModel.pageNo-1)*searchModel.pageSize+scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="影视编号" width="80" />
        <el-table-column prop="image" label="影视图片" width="80">
          <template slot-scope="scope">
            <img :src="movieJPG(scope.row.image)" style="height: 50px;width: 70px">
          </template>
        </el-table-column>
        <el-table-column prop="name" label="影视名称" width="180" />
        <el-table-column prop="director" label="导演" width="180" />
        <el-table-column prop="actor" label="演员" width="180" />
        <el-table-column prop="cid" label="分类" width="80">
          <template slot-scope="scope">
            <span v-for="cate in category" v-show="scope.row.cid==cate.id">
              {{ cate.name }}
            </span>
          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="openEditUI(scope.row.id)" />
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteMovie(scope.row)" />
            <el-button type="primary" @click="showVideo(scope.row.id)">播放视频</el-button>
          </template>

        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog v-loading="loading" :title="title" :visible.sync="dialogFormVisible" @close="clearForm">
      <el-form ref="movieFormRef" :model="movieForm" :rules="rules">
        <el-form-item label="影视名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="movieForm.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="所属栏目" prop="cid" :label-width="formLabelWidth">
          <el-select v-model="movieForm.cid" clearable placeholder="请选择">
            <el-option
              v-for="item in category"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="导演" prop="director" :label-width="formLabelWidth">
          <el-input v-model="movieForm.director" autocomplete="off" />
        </el-form-item>
        <el-form-item label="演员" prop="actor" :label-width="formLabelWidth">
          <el-input v-model="movieForm.actor" autocomplete="off" />
        </el-form-item>
        <el-form-item label="影视图片" prop="image" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            name="uploadImage"
            action=""
            :limit="1"
            :before-upload="handleBeforeUpload"
            :http-request="uploadImage"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="影视文件" prop="url" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            name="uploadVideo"
            action=""
            :limit="1"
            :before-upload="handleBeforeUpload"
            :http-request="uploadVideo"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMovie">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="播放视频" :visible.sync="dialogShow">
      <div id="J_prismPlayer" />
    </el-dialog>

    <el-button type="primary" @click="showVideo(1)">播放视频</el-button>

  </div>

</template>

<script>
import movieApi from '@/api/movieManage'
import categoryApi from '@/api/categoryManage'

export default {
  data() {
    return {
      dialogShow: false,
      category: [{
        id: 1,
        name: '电影'
      }],
      loading: false,
      formLabelWidth: '130px',
      movieForm: {
      },
      dialogFormVisible: false,
      title: '',
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 5
      },
      movieList: [],
      rules: {
        name: [
          { required: true, message: '请输入影视名', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getMovieList()
    this.getCategroyList()
  },

  methods: {
    showVideo(id) {
      if (this.dialogShow) {
        this.dialogShow = false
        return
      } else {
        this.dialogShow = true
      }

      movieApi.getMovie(id, 1).then(response => {
        console.log('@@')
        console.log(response.data)

        new Aliplayer({
          id: 'J_prismPlayer',
          width: '100%',
          height: '500px',
          autoplay: false,
          isLive: false,
          preload: true,
          cover: response.data.image, // 图片
          vid: response.data.playId, // 必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
          playauth: response.data.playAuth
        }, function(player) {
          console.log('The player is created.')
        })
      })
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize
      this.getMovieList()
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo
      this.getMovieList()
    },
    getMovieList() {
      movieApi.getMovieList(this.searchModel).then(response => {
        console.log(response.data)
        this.movieList = response.data.row
        this.total = response.data.total
      })
    },
    openEditUI(id) {
      if (id == null) {
        this.title = '新增影视'
      } else {
        this.title = '修改影视'

        movieApi.getMovieById(id).then(response => {
          this.movieForm = response.data
        })
      }

      this.dialogFormVisible = true
    },
    clearForm() {
      this.movieForm = {
      }
      // this.$refs['movieFormRef'].clearValidate()
      this.$refs.movieFormRef.clearValidate()
    },
    saveMovie() {
      this.$refs.movieFormRef.validate((valid) => {
        if (valid) {
          movieApi.saveMovie(this.movieForm).then(response => {
            this.$message({
              message: response.message,
              type: 'success'
            })

            this.dialogFormVisible = false
            this.getMovieList()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    deleteMovie(movie) {
      this.$confirm(`您确定删除影视${movie.name}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        movieApi.deleteMovieById(movie.id).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.getMovieList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    movieJPG(image) {
      if (image[0] === '/') {
        return require('@/assets' + image)
      } else {
        return image
      }
    },
    // 文件开始上传,开始屏幕遮罩
    handleBeforeUpload() {
      this.loading = true
    },
    uploadImage(param) {
      this.loading = true
      const formData = new FormData()
      formData.append('file', param.file)
      const url = 'http://localhost:9999/upload/image'
      // var _this = this
      movieApi.upload(url, formData).then(response => {
        this.loading = false
        this.$message({
          type: 'success',
          message: '图片上传成功',
          duration: 6000
        })
        console.log(response)
        this.movieForm.image = response.data.image
      })
    },
    uploadVideo(param) {
      this.loading = true
      const formData = new FormData()
      formData.append('file', param.file)
      const url = 'http://localhost:9999/upload/video'
      movieApi.upload(url, formData).then(response => {
        this.loading = false
        this.$message({
          type: 'success',
          message: '影视上传成功',
          duration: 6000
        })
        console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@')
        console.log(response)
        this.movieForm.playId = response.data.video
        console.log(this.movieForm)
        console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
      })
    },
    getCategroyList() {
      categoryApi.getCategroyList().then(response => {
        this.category = response.data
      })
    }
  }
}
</script>

<style scoped>
#search .el-input{
  width: 200px;
  margin-right: 10px;
}

#search .el-select{
  width: 200px;
  margin-right: 10px;
}

.el-dialog .el-input{
  width: 85%;
}

</style>
